<template>
  <div>
    <p>年龄: {{ age }}</p>
    <button @click="changeAge">修改年龄</button>
    <hr>
    <p>{{ person }}</p>
    <button @click="changePersonAge">修改person的年龄</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 特点: 能够让简单类型的数据变成响应式对象, 此外, 也能让复杂类型的数据变成响应式对象
// ref(初始值) -> 返回一个响应式对象, 对象有一个属性value, value属性中存储着初始值

// 1. 简单类型的数据
const age = ref(18)
// console.log(age);
const changeAge = () => {
  age.value++
}

// 2. 复杂类型的数据
const person = ref({
  name: '张三',
  age: 17
})
const changePersonAge = () => {
  person.value.age++
}
</script>